<%--
  Created by IntelliJ IDEA.
  User: cairsimod
  Date: 2020/7/10
  Time: 4:56 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" import="java.util.*" %>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>达内商城学子登陆页面</title>
    <link href="../css/header.css" rel="stylesheet"/>
    <link href="../css/footer.css" rel="stylesheet"/>
    <link href="../css/animate.css" rel="stylesheet"/>
    <link href="../css/login.css" rel="stylesheet"/>
</head>
<body>
<!-- 页面顶部-->
<header id="top">
    <div class="top">
        <img src="../img/header/logo.png" alt=""/>
        <span>欢迎登录</span>
    </div>
</header>
<div id="container">
    <div id="cover" class="rt">
        <form id="fm-login" name="form1" method="post" action="../action/LoginServlet" >
            <div class="txt">
                <p>登录学子商城
                    <span>
                        <a href="register.jsp">新用户注册</a>
                    </span>
                </p>
                <div class="text">
                    <input type="text" placeholder="请输入您的用户名" name="uname" id="uname" required>
                    <span></span>
                </div>

                <div class="text">
                    <input type="password" id="upwd" placeholder="请输入您的密码" name="upwd" required minlength="6" maxlength="15">
                    <span></span>
                </div>
                <div class="chose">

                </div>
                <input class="button_login" type="button" value="登录" id="bt-login" />
            </div>
        </form>
    </div>
</div>
<!--错误提示-->
<div id="showResult"></div>
<!-- 品质保障，私人定制等-->
<div id="foot_box">
    <div class="icon1 lf">
        <img src="../img/footer/icon1.png" alt=""/>

        <h3>品质保障</h3>
    </div>
    <div class="icon2 lf">
        <img src="../img/footer/icon2.png" alt=""/>

        <h3>私人定制</h3>
    </div>
    <div class="icon3 lf">
        <img src="../img/footer/icon3.png" alt=""/>

        <h3>学员特供</h3>
    </div>
    <div class="icon4 lf">
        <img src="../img/footer/icon4.png" alt=""/>

        <h3>专属特权</h3>
    </div>
</div>
<!-- 页面底部-->
<div class="foot_bj">
    <div id="foot">
        <div class="lf">
            <p class="footer1"><img src="../img/footer/tedu.png" alt="" class=" footLogo"/></p>
            <p class="footer2"><img src="../img/footer/footerFont.png"alt=""/></p>
            <!-- 页面底部-备案号 #footer -->
            <div class="record">
                2001-2016 版权所有 京ICP证8000853号-56
            </div>
        </div>
        <div class="foot_left lf" >
            <ul>
                <li><a href="#"><h3>买家帮助</h3></a></li>
                <li><a href="#">新手指南</a></li>
                <li><a href="#">服务保障</a></li>
                <li><a href="#">常见问题</a></li>
            </ul>
            <ul>
                <li><a href="#"><h3>商家帮助</h3></a></li>
                <li><a href="#">商家入驻</a></li>
                <li><a href="#">商家后台</a></li>
            </ul>
            <ul>
                <li><a href="#"><h3>关于我们</h3></a></li>
                <li><a href="#">关于达内</a></li>
                <li><a href="#">联系我们</a></li>
                <li>
                    <img src="../img/footer/wechat.png" alt=""/>
                    <img src="../img/footer/sinablog.png" alt=""/>
                </li>
            </ul>
        </div>
        <div class="service">
            <p>达内商城客户端</p>
            <img src="../img/footer/ios.png" class="lf">
            <img src="../img/footer/android.png" alt="" class="lf"/>
        </div>
        <div class="download">
            <img src="../img/footer/erweima.png">
        </div>
    </div>
</div>
    <!--
        javascript实现
        html,js,css三者关系 html搭建基本架构，css实现页面的一些静态样式
    -->
<script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>
<script>
    //点击登陆按钮，找到该事件（函数，方法），该方法完成提交事宜
    // $('#bt-login'):表示根据登陆按钮的id属性找到该按钮
    //$('#bt-login').click():表示登陆按钮的单击
    //$('#bt-login').click(function(){}):表示点击登陆按钮触发（调用）一个函数（方法，事件）
    $('#bt-login').click(function(){
        //触发该函数是为了提交form表单中的input值到后端服务器
        //$('#fm-login'):根据form表单的id属性值找到form表单
        //$('#fm-login').submit()：form表单调用提交函数，将自己提交到action属性指定的地址
        $('#fm-login').submit();
    });
    //blur:鼠标移出事件
    //$("#uname").blur(function(){}):当鼠标从uname框中移出，触发一个函数
    $("#uname").blur(function(){
        //1.判断用户是否填写信息
        //var：定义变量
        //$("#uname").val():获取uname文版框中的数据
        var data = $("#uname").val();
        if(data == null || data == ""){
            //$("#showResult"):找到id是showResult的标签
            //$("#showResult").text("用户名不能为空！")：在该标签中填写内容
            $("#showResult").text("用户名不能为空！");
            $("#showResult").css("color","red");
        }else{
            //2.判断用户填写的用户名在数据库表中是否存在
            //提交 部分信息---》异步提交（异步刷新）
            $.ajax({
                type:"GET",
                url:"../action/CheckUnameServlet",
                data:"uname="+data,
                beforeSend:function(XMLHttpRequest)
                {
                    $("#showResult").text("正在查询...");

                },
                success:function(obj){
                    if(obj == 'yes'){
                        $("#showResult").text("用户名正常使用");
                    }else if(obj == 'no'){

                        $("#showResult").text("该用户不存在");
                        $("#showResult").css("color","red");
                    }
                },
                error:function(){
                    //错误提示
                    $("#showResult").text("系统异常");
                    $("#showResult").css("color","red");
                }
            });
        }

    });
</script>
</body>
</html>

